// 折线图模型01
export function LineChart01(myChart, title, legend, xAxisName, yAxisName, yAxisArr, seriesArr) {
  myChart.clear()
  myChart.setOption({
    title: {
      text: title,
      textStyle: {
        fontSize: 20, // 字体大小
        color: '#495057' // 字体颜色
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    graphic: {
      type: 'image',
      top: 'center',
      left: 'center',
      style: {
        image: require('../../assets/logo/favicon_text.png'),
        opacity: 0.2,
        width: 300,
        height: 300
      }
    },
    legend: {
      data: legend
    },
    grid: {
      left: '3%',
      right: '5%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      name: xAxisName,
      type: 'value',
      axisLabel: {
        show: true,
        textStyle: {
          color: '#495057'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#495057'
        }
      }
    },
    yAxis: {
      name: yAxisName,
      type: 'category',
      axisLabel: {
        show: true,
        textStyle: {
          color: '#495057'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#495057'
        }
      },
      axisTick: {
        show: false
      },
      data: yAxisArr
    },
    series: seriesArr
  })

  // 解决自适应
  setTimeout(function() {
    window.addEventListener('resize', () => {
      myChart.resize()
    })
  }, 500)
}

// 折线图模型02
export function LineChart02(myChart, title, legend, xAxisName, xAxisArr, yAxisName, seriesArr) {
  myChart.clear()
  myChart.setOption({
    title: {
      text: title,
      textStyle: {
        fontSize: 20, // 字体大小
        color: '#495057' // 字体颜色
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    graphic: {
      type: 'image',
      top: 'center',
      left: 'center',
      style: {
        image: require('../../assets/logo/favicon_text.png'),
        opacity: 0.2,
        width: 300,
        height: 300
      }
    },
    legend: {
      data: legend
    },
    grid: {
      left: '3%',
      right: '5%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      name: xAxisName,
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        show: true,
        textStyle: {
          color: '#495057'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#495057'
        }
      },
      data: xAxisArr
    },
    yAxis: {
      name: yAxisName,
      type: 'value',
      axisLabel: {
        show: true,
        textStyle: {
          color: '#495057'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#495057'
        }
      }
    },
    series: seriesArr
  })

  // 解决自适应
  setTimeout(function() {
    window.addEventListener('resize', () => {
      myChart.resize()
    })
  }, 500)
}

// 饼状图模型01
export function pieChart01(myChart, legend, seriesDataArr) {
  myChart.clear()
  myChart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: legend
    },
    series: [
      {
        name: '支出',
        type: 'pie',
        radius: ['55%', '70%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: '16',
              fontWeight: 'bold'
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: seriesDataArr
      }
    ]
  })

  // 解决自适应
  setTimeout(function() {
    window.addEventListener('resize', () => {
      myChart.resize()
    })
  }, 500)
}

// 中国地图模型01
export function ChinaMapChart01(myChart, title, subtext, legend, seriesArr) {
  myChart.clear()
  myChart.setOption({
    title: {
      text: title,
      subtext: subtext,
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: legend
    },
    visualMap: {
      min: 0,
      max: 2500,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'], // 文本，默认为数值文本
      calculable: true
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    series: seriesArr
  })
}
